<template>
  <div class="wrap">
    <div class="container">
      <div class="left" style="background: tomato">left</div>
      <div class="right" style="background: lightgreen">right</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // import { ref, unref, reactive, onMounted } from "vue"
</script>

<style lang="less" scoped>
  // flex布局
  .container {
    display: flex;
  }
  .left,
  .right {
    height: 200px;
  }
  .left {
    width: 200px;
  }
  .right {
    flex: 1;
  }

  // 浮动布局
  // .left,
  // .right {
  //   height: 200px;
  // }
  // .left {
  //   float: left;
  //   width: 200px;
  // }
  // .right {
  //   margin-left: 200px;
  //   width: auto; /*撑满整个父元素*/
  // }

  // 浮动布局 - 右边触发BFC，不会发生重叠
  // .left,
  // .right {
  //   height: 200px;
  // }
  // .left {
  //   float: left;
  //   width: 200px;
  // }
  // .right {
  //   overflow: hidden;
  // }

  // 定位布局 - 左边为绝对定位，width=200，右边margin-left: 200
  // .container {
  //   position: relative;
  // }
  // .left {
  //   position: absolute;
  //   width: 200px;
  //   height: 200px;
  // }
  // .right {
  //   margin-left: 200px;
  //   height: 200px;
  // }

  // 定位布局 - 右边设置为绝对定位，左边为200，其余方向都为0
  // .container {
  //   position: relative;
  // }
  // .left {
  //   width: 200px;
  //   height: 200px;
  // }
  // .right {
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   left: 200px;
  //   height: 200px;
  // }
</style>
